<script lang="ts" setup>
  // import { watchEffect, reactive, onUnmounted, ref } from 'vue';
  import { RouterView } from 'vue-router';
  import {
    Card,
    Image,
    List,
    ListItem,
    ListItemMeta,
    Affix
  } from '@arco-design/web-vue';
  import SearchHeader from '/@/views/pins/components/SearchHeader.vue';
  import NavList from '/@/views/pins/components/NavList.vue';
  import PinEditor from '/@/views/pins/components/PinEditor.vue';
  import Introduction from '/@/components/Introduction.vue';
  import adImg from '/@/assets/pins/ad.png';
  import type { Hotspot_topicRecord } from '/@/api/model/hotspotModel';
  import { queryHotspot_topicList } from '/@/api/hotspot';
  
  import { ref } from 'vue';
  import { queryHostList } from '/@/api/pins';
  import type { Hotspot_topicRecordList } from '/@/api/model/pinsModel';
  const hotspot_topicLoding = ref(true);
  const Hotspot_topicList = ref<Hotspot_topicRecord[]>([]);
  const hotspotLoding = ref(true);

  const hotspotList = ref<Hotspot_topicRecordList[]>([]);
  const getFollow = async () => {
    let params = {
      recommend: 0,
    };
    const data = await queryHotspot_topicList(params);
    Hotspot_topicList.value = data.slice(0, 10);
    hotspot_topicLoding.value = false;
  };

  const getHost = async () => {
    let params = {
      choiceness: 0,
    };
    const data = await queryHostList(params);
    hotspotList.value = data.slice(0, 10);
    hotspotLoding.value = false;
  };

  getHost();
  getFollow();
</script>
<template>
  <SearchHeader class="!h-[300px]" />
  <div class="box-border">
    <div class="flex relative">
      <div class="left mr-[18px]">
        <Affix :offsetTop="90">
        <NavList />
        </Affix>
      </div>
      <div class="center flex-1 min-h-[calc(100vh-13rem-1240px)]">
        <PinEditor />
        <RouterView />
      </div>
      <div class="rightt w-[266px] ml-[18px]">
        <!-- 个人简介 -->
        <Introduction />
        <!-- 个人简介 -->
        <!-- 广告区 -->
        <card
          class="ad-block mb-[10px] bg-[rgba(255,255,255,0.8)] rounded-[8px]"
          hoverable
          :bordered="false"
        >
          <template #cover>
            <div class="h-[186px] overflow-hidden rounded-[8px]">
              <Image width="100%" height="100%" fit="cover" :src="adImg" />
            </div>
          </template>
        </card>
        <!-- 广告区 -->

        <!-- 热门话题 -->
        <a-card title="热门话题" class="hot-topic-block mt-[30px] mb-[10px] bg-transparent">
          <a-skeleton animation v-if="hotspot_topicLoding">
            <a-space direction="vertical" :style="{ width: '100%' }" size="large">
              <a-skeleton-line :rows="10" />
            </a-space>
          </a-skeleton>

          <a-row
            v-for="(item, index) in Hotspot_topicList"
            :key="index"
            class="w-full !px-0 !py-2"
            v-else
          >
            <a-col :span="18">
              <a class="block" :href="'/pins/topic/' + item.id" target="_blank"
                >#{{ item.name }}#
              </a>
            </a-col>
            <a-col :span="4" :offset="2" class="w-[60px] text-right text-[rgba(0,0,0,0.5)]"
              >99k+
            </a-col>
          </a-row>
        </a-card>

        <!-- 精选模块 -->
        <card title="精选星点" class="select-block mt-[30px] bg-transparent" :bordered="false">
          <a-skeleton animation v-if="hotspotLoding">
            <a-space direction="vertical" :style="{ width: '100%' }" size="large">
              <a-skeleton-line :rows="20" />
            </a-space>
          </a-skeleton>

          <List :bordered="false" size="small" v-else>
            <list-item
              v-for="(item, index) in hotspotList"
              :key="index"
              class="!px-0 cursor-pointer py-[3px]"
              action-layout="vertical"
            >
              <list-item-meta class="flex items-center">
                <template #avatar v-if="item.cover">
                  <div class="w-[62px] h-[62px]">
                    <Image
                      width="100%"
                      height="100%"
                      fit="cover"
                      alt="arco-design"
                      :src="item.cover"
                    />
                  </div>
                </template>
                <template #title>
                  <a class="block" :href="'/pins/pin/' + item.id" target="_blank">
                    <div class="text-[rgba(0,0,0,0.5)]">{{ item.brief }} </div>
                  </a>
                </template>
                <template #description>
                  <div class="text-[#8A919F] text-[12px]"
                    >{{ item.star }}赞 · {{ item.comment_count }}评论
                  </div>
                </template>
              </list-item-meta>
            </list-item>
          </List>
        </card>
        <!-- 精选模块 -->
      </div>
    </div>
  </div>
</template>

<style scoped>
  .grade-color {
    background: linear-gradient(90deg, #ffbfe5 0%, rgba(255, 201, 61, 0) 165.62%);
  }

  .auth-color {
    background: linear-gradient(273.5deg, #abbfff 5.44%, rgba(233, 171, 255, 0) 168.4%);
  }

  .user-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ad-block :deep(.arco-card-body) {
    padding: 0 !important;
  }

  .hot-topic-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hot-topic-block {
    box-shadow: 1px 1px 5px 4px rgb(var(--gray-2));
  }

  .hot-topic-block :deep(.arco-list-item-main) {
    width: 100%;
  }

  .select-block {
    box-shadow: 1px 1px 5px 4px rgb(var(--gray-2));
  }

  .select-block :deep(.arco-list-item-meta),
  .select-block :deep(.arco-list-item-meta-content),
  .select-block :deep(.arco-list-item-meta-title) {
    height: 100%;
  }

  .select-block :deep(.arco-list-item-meta-title) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* .select-block>>>.arco-list-item-content {
            height: calc(100% - 30px);
          } */

  .select-block :deep(.arco-list-item-action) {
    height: 30px;
    line-height: 30px;
  }

  .select-block :deep(.arco-list-item-main) {
    height: 80px !important;
    padding-right: 6px;
    box-sizing: border-box;
  }

  .user-card :deep(.arco-avatar-image) {
    width: 46px;
    height: 46px;
  }
</style>
